import React,{ useState, useLayoutEffect} from 'react'
import { StyleSheet, Text, View, TouchableOpacity, Image, TouchableWithoutFeedback, FlatList } from 'react-native'
import Header from '../components/Header'
import { useNavigation } from '@react-navigation/core'
import { inject, observer } from 'mobx-react'
interface Props {
  store?:any
}

const Cart = (props: Props) => {
  const [keyWord, setKeyWord] = useState('')
  const [proList, setProList] = useState<any>([])
  const [count, setcount] = useState(2)
  const [refreshing, setRefreshing] = useState(false)
  const listRef =React.useRef<any>()
  const navigate = useNavigation()

  const getCart = () => {
    const cartReq = new Request("http://121.89.205.189/api/cart/list",{
      method:"POST",
      headers:{
        "Content-Type":"application/json",
        Accept:"application/json",
        "token":props.store.app.token,
      },
      body:JSON.stringify({userid:props.store.app.userid})
    })
    fetch(cartReq).then(res=>res.json())
    .then(res => {
      setProList(res.data)
    })
  }
  useLayoutEffect( getCart , [])
  const Item = ({item,onPress}:any) => {
    return (
      <TouchableOpacity onPress={ onPress }>
        <View style={ styles.proItem }>
          <Image style={ styles.itemImage } source = {{ uri: item.img1 }} />
          <View style={ styles.itemText }>
            <Text>{ item.proname }</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }
  
  const onRefresh = () => {
    getCart()
  }
  const backtop = () => {
    // 返回顶部看不到轮播图区域
    // listRef.current.scrollToIndex({
    //   index: 0
    // })
    listRef.current.scrollToOffset({
      offset: 0
    })
  }
  const renderItem = ({item}:any) => {
    const toDetail = (id:any) => {
      navigate.navigate("/detail",{proid:id})
    }
    return (
      <Item
          item={item}
          onPress={() => toDetail(item.proid)}
      />
    )
  }
  return (
    <View style={styles.container}>
      <Header title="购物车"/>
      <Text>{ keyWord }</Text>
      <View style={styles.content}>
        <FlatList 
          ref = { listRef }
          data = { proList }
          renderItem = { renderItem }
          keyExtractor = { (item:any) => item.proid }
          refreshing = { refreshing }
          onRefresh = { onRefresh }
        >
        </FlatList>
       </View>
       
       <TouchableWithoutFeedback
          onPress = { backtop }
        >
          <View style={ styles.backtop }>
            <Text>⬆️</Text>
          </View>
        </TouchableWithoutFeedback>
    </View>
  )
}


export default inject("store")(observer(Cart))

const styles = StyleSheet.create({
  container:{
    flex:1
  },
  content: {
    width: '100%',
    flex: 1,
  },
  proItem: {
    display: 'flex',
    flexDirection: 'row',
    marginLeft: 10,
    marginRight: 10,
    marginTop: 5,
    marginBottom: 5,
    borderRadius:15,
    backgroundColor:'#d6d6d6df',
    padding: 10,
  },
  itemImage: {
    width: 100,
    height: 100,
    borderWidth: 1,
    borderRadius:15,
    // borderStyle: 'solid',
    borderColor: '#f66'
  },
  itemText:{
    // backgroundColor:'#ff3',
    flex:1
  },
  backtop: {
    position: 'absolute',
    bottom: 10,
    right: 10,
    width: 30,
    height: 30,
    backgroundColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center'
  },
})
